import PickerView from '../PickerView';
import { Button, Popup } from '@nutui/nutui-react-taro';
import { View } from '@tarojs/components';
import type { FC, CSSProperties } from 'react';
import { useState, useRef, useEffect } from 'react';
import { InfiniteList, InputSearch, Icon } from '@/components';
import { getApiCustomerPage } from '@/api';
import type {
  GetApiCustomerPageRequest,
  GetApiCustomerPageResponse,
} from '@/api';
import { Checklist } from '@nutui/icons-react-taro';
import dayjs from 'dayjs';
import './index.scss';
import { isEmpty } from 'lodash-es';
import classnames from 'classnames';
import { isLogin } from '@/utils';

export type DataProps = Required<GetApiCustomerPageResponse>['data'][0];

const PREFIX_CLS = 'm-customer-picker';

interface CustomerPickerProps {
  className?: string;
  style?: CSSProperties;
  placeholder?: string;
  value?: DataProps;
  onChange?: (value: DataProps) => void;
}

// 客户选择
const CustomerPicker: FC<CustomerPickerProps> = ({
  className,
  style,
  placeholder,
  value,
  onChange,
}) => {
  const [visible, setVisible] = useState(false);
  const listRef = useRef<any>();
  // 搜索关键字
  const [keyword, setKeyword] = useState<string>('');
  const [current, setCurrent] = useState<DataProps>();

  useEffect(() => {
    if (!isEmpty(value)) {
      setCurrent(value);
    }
  }, [value]);

  useEffect(() => {
    if (visible) {
      listRef.current?.refresh();
    }
  }, [visible]);

  return (
    <PickerView
      className={classnames(className)}
      style={style}
      text={placeholder}
      defaultText={placeholder}
      onClick={() => {
        setVisible(true);
      }}
    >
      <Popup
        closeable
        title="选择客户"
        position="bottom"
        visible={visible}
        onClose={() => setVisible(false)}
        className={PREFIX_CLS}
      >
        <InfiniteList<DataProps, GetApiCustomerPageRequest, any>
          request={getApiCustomerPage as any}
          actionRef={listRef}
          params={{
            queryInfo: keyword,
          }}
          manual={!isLogin()}
          header={
            <InputSearch
              placeholder="姓名/手机号"
              onSearch={(v) => {
                setKeyword(v as string);
              }}
            />
          }
          renderItem={(d) => (
            <View
              className="item"
              onClick={() => {
                setCurrent(d);
              }}
              key={d.id}
            >
              <View className="name__wrap">
                <View className="name">{d.name}</View>
                {d.id === current?.id && <Checklist className="check" />}
              </View>

              <View className="row">
                {d?.phone && (
                  <View className="col">
                    <Icon name="MobileOutlined" size={14} />
                    {d?.phone}
                  </View>
                )}
                {d?.address && (
                  <View className="col">
                    <Icon name="EnvironmentOutlined1" size={14} />
                    {d?.address}
                  </View>
                )}
              </View>
              <View className="row">
                婚期：
                {d.marryDate
                  ? dayjs(d.marryDate).format('YYYY年MM月DD日')
                  : '--'}
              </View>
            </View>
          )}
          headerFixed
        />
        <View className="footer">
          <Button size="large" onClick={() => setVisible(false)}>
            取消
          </Button>
          <Button
            size="large"
            type="primary"
            onClick={() => {
              setVisible(false);
              onChange?.(current as DataProps);
            }}
          >
            确定
          </Button>
        </View>
      </Popup>
    </PickerView>
  );
};

export default CustomerPicker;
